<template>
  <div ref="echartCon" style="width: 100%; height: 350px"></div>
</template>

<script>
import echarts from "@/utils/lib/echarts";
import { BarChart } from "echarts/charts";
echarts.use([BarChart]);
export default {
  data() {
    return {};
  },
  methods: {
    initChart(xData, seriesData) {
      let myChart = echarts.init(this.$refs.echartCon);
      let option = {
        grid: {
          left: "1%",
          right: "3%",
          bottom: "1%",
          top: "15%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: 24, // 字体大小
            align: "left",
          },
          valueFormatter: function (value) {
            return value + " 元";
          },
        },
        // legend: {
        //   data: ["预算1", "预算2"],
        //   top: 0,
        //   left: 0,
        //   icon: "rect",
        //   // itemWidth: 20,
        //   // itemHeight: 10,
        //   textStyle: { color: "#fff" },
        // },
        color: ["rgba(11, 235, 250, 1)", "rgba(6, 255, 165, 1)"],
        xAxis: {
          type: "category",
          boundaryGap: true,
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: {
            color: "rgba(0, 0, 0, 1)",
            interval: 0, //使x轴文字显示全
            fontSize: "14",
            fontWeight: 400,
            // formatter: function (value) {
            //   // let arr = value.split("月");
            //   return arr[0];
            // },
          },
          data: xData,
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: { color: "rgba(0, 0, 0, 1)", type: "dashed" },
          },
          splitNumber: 4,
          axisLabel: {
            formatter: "{value}",
            color: "rgba(0, 0, 0, 1)",
            fontSize: "14",
            fontWeight: 400,
          },
        },
        series: [
          {
            type: "bar",
            //  padding: 2,
            // showBackground: true,

            // showBackground: true,
            backgroundStyle: { color: "rgba(21, 34, 35, 1)", borderWidth: 5 },

            // label: {
            //   show: true,
            //   position: "top",
            //   color: "rgba(255, 255, 255, 1)",
            //   fontSize: "14",
            // },

            barWidth: 16,
            itemStyle: {
              borderColor: "rgba(21, 34, 35, 0.1)",
              borderWidth: 4,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(47, 220, 238, 0.2)" },
                { offset: 1, color: "rgba(47, 220, 238, 1)" },
              ]),
            },
            // emphasis: {
            //   itemStyle: {
            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //       { offset: 0, color: "rgba(47, 220, 238, 0.2)" },
            //       { offset: 1, color: "rgba(47, 220, 238, 1)" },
            //     ]),
            //   },
            // },
            name: seriesData[0].name,
            data: seriesData[0].data,
          },
          {
            type: "bar",
            backgroundStyle: { color: "rgba(21, 34, 35, 1)", borderWidth: 5 },
            barWidth: 16,
            itemStyle: {
              borderColor: "rgba(21, 34, 35, 0.1)",
              borderWidth: 4,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(240, 69, 69, 0.2)" },
                { offset: 1, color: "rgba(240, 69, 69, 1)" },
              ]),
            },
            name: seriesData[1].name,
            data: seriesData[1].data,
          },
        ],
      };
      option && myChart.setOption(option);
      // window.addEventListener("resize", () => myChart.resize());
    },
  },
};
</script>
<style scoped lang="scss"></style>
